<!DOCTYPE html>
<html lang="en">
   <script>
      // token是否存在的判断
      // 没有为null 有 就是具体的值
      const token = localStorage.getItem("usertoken")
      // console.log('token:', token)
      // if (token === null) {
      /// null 取反为true
      if (!token) {
         window.location.href = "./login.html"
      }
   </script>
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>首页</title>
      <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
      <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
      <link rel="stylesheet" href="./css/common.css" />
      <link rel="stylesheet" href="./css/index.css" />
   </head>
   <body class="application application-offset">
      <div class="container-fluid container-application">
         <div class="sidenav show" id="sidenav-main">
            <!-- Sidenav header -->
            <div class="sidenav-header d-flex align-items-center">
               <a class="navbar-brand" href="./index.html">
                  <span class="logo">·ITCAST·</span>
               </a>
            </div>
            <!-- User mini profile -->
            <div
               class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center"
            >
               <!-- Avatar -->
               <div>
                  <a href="#" class="avatar rounded-circle avatar-xl">
                     <img
                        alt="Image placeholder"
                        src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
                        class=""
                     />
                  </a>
                  <div class="mt-5">
                     <h5 class="mb-0 text-white">黑马前端</h5>
                     <span class="d-block text-sm text-white opacity-8 mb-3"
                        >数据可视化</span
                     >
                     <a
                        href="javascript:;"
                        class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3"
                     >
                        <span class="btn-inner--text">学前端来黑马</span>
                     </a>
                  </div>
               </div>
            </div>
            <!-- Application nav -->
            <div class="nav-application clearfix">
               <a href="./index.html" class="btn btn-square text-sm active">
                  <span class="btn-inner--icon d-block"
                     ><i class="bi bi-house bi-2x"></i
                  ></span>
                  <span class="btn-inner--icon d-block pt-2">首页</span>
               </a>
               <a href="./student.html" class="btn btn-square text-sm">
                  <span class="btn-inner--icon d-block"
                     ><i class="bi bi-people bi-2x"></i
                  ></span>
                  <span class="btn-inner--icon d-block pt-2">学生</span>
               </a>
               <a href="javascript:;" class="btn btn-square text-sm">
                  <span class="btn-inner--icon d-block"
                     ><i class="bi bi-columns bi-2x"></i
                  ></span>
                  <span class="btn-inner--icon d-block pt-2">排版</span>
               </a>
               <a href="javascript:;" class="btn btn-square text-sm">
                  <span class="btn-inner--icon d-block"
                     ><i class="bi bi-files bi-2x"></i
                  ></span>
                  <span class="btn-inner--icon d-block pt-2">资料</span>
               </a>
               <a href="javascript:;" class="btn btn-square text-sm">
                  <span class="btn-inner--icon d-block"
                     ><i class="bi bi-receipt bi-2x"></i
                  ></span>
                  <span class="btn-inner--icon d-block pt-2">就业</span>
               </a>
               <a href="javascript:;" class="btn btn-square text-sm">
                  <span class="btn-inner--icon d-block"
                     ><i class="bi bi-gear bi-2x"></i
                  ></span>
                  <span class="btn-inner--icon d-block pt-2">设置</span>
               </a>
            </div>
            <!-- Misc area -->
            <div class="card bg-gradient-warning">
               <div class="card-body">
                  <h5 class="text-white">哈喽, 朋友!</h5>
                  <p class="text-white mb-4">
                     为什么不现在开始学习前端，创造一些令人惊叹的东西呢？
                  </p>
                  <a
                     href="http://itcast.cn"
                     class="btn btn-sm btn-block btn-white rounded-pill"
                     target="_blank"
                     >Get started</a
                  >
               </div>
            </div>
         </div>
         <div class="main-content position-relative">
            <nav
               class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border"
               id="navbar-main"
            >
               <div class="container-fluid">
                  <!-- Navbar nav -->
                  <div
                     class="collapse navbar-collapse navbar-collapse-fade"
                     id="navbar-main-collapse"
                  >
                     <ul class="navbar-nav align-items-lg-center">
                        <!-- Home  -->
                        <li class="nav-item">
                           <a class="nav-link pl-lg-0" href="./index.html">
                              首页
                           </a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link pl-lg-0" href="./index.html">
                              传智教育
                           </a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link pl-lg-0" href="./index.html">
                              黑马程序员
                           </a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link pl-lg-0" href="./index.html">
                              文档
                           </a>
                        </li>
                     </ul>
                     <!-- Right menu -->
                     <ul
                        class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex"
                     >
                        <li class="nav-item dropdown dropdown-animate">
                           <a
                              class="nav-link pr-lg-0"
                              href=".dropdown-menu"
                              role="button"
                              data-toggle="dropdown"
                              aria-haspopup="true"
                              aria-expanded="false"
                           >
                              <div class="media media-pill align-items-center">
                                 <span class="avatar rounded-circle">
                                    <img
                                       alt="Image placeholder"
                                       src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
                                    />
                                 </span>
                                 <div class="ml-2 d-none d-lg-block">
                                    <span class="mb-0 text-sm font-weight-bold"
                                       >Admin</span
                                    >
                                 </div>
                              </div>
                           </a>
                        </li>
                        <li class="nav-item">
                           <a
                              class="nav-link pl-lg-0"
                              id="logout"
                              href="javascript:;"
                           >
                              退出
                           </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </nav>
            <div class="page-content">
               <!-- Page Title -->
               <div class="page-title">
                  <div class="row justify-content-between align-items-center">
                     <div class="col-md-6 mb-3 mb-md-0">
                        <h5 class="h3 font-weight-400 mb-0 text-white">
                           Dashboard
                        </h5>
                        <span class="text-sm text-white opacity-8"
                           >深圳前端 xx 期</span
                        >
                     </div>
                  </div>
               </div>
               <!-- charts -->
               <div class="row">
                  <div class="col-xl-3 col-md-6">
                     <div class="card card-stats">
                        <div class="card-body">
                           <div class="row">
                              <div class="col">
                                 <h6 class="text-muted mb-1">就业薪资</h6>
                                 <span
                                    name="salary"
                                    class="h3 font-weight-bold mb-0"
                                    >15500</span
                                 >
                              </div>
                              <div class="col-auto">
                                 <i class="bi bi-coin"></i>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-xl-3 col-md-6">
                     <div class="card card-stats">
                        <div class="card-body">
                           <div class="row">
                              <div class="col">
                                 <h6 class="text-muted mb-1">班级人数</h6>
                                 <span
                                    name="student_count"
                                    class="h3 font-weight-bold mb-0"
                                    >80</span
                                 >
                              </div>
                              <div class="col-auto">
                                 <i class="bi bi-people"></i>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-xl-3 col-md-6">
                     <div class="card card-stats">
                        <div class="card-body">
                           <div class="row">
                              <div class="col">
                                 <h6 class="text-muted mb-1">平均年龄</h6>
                                 <span
                                    name="age"
                                    class="h3 font-weight-bold mb-0"
                                    >24.40</span
                                 >
                              </div>
                              <div class="col-auto">
                                 <i class="bi bi-calendar2-week"></i>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-xl-3 col-md-6">
                     <div class="card card-stats">
                        <!-- Card body -->
                        <div class="card-body">
                           <div class="row">
                              <div class="col">
                                 <h6 class="text-muted mb-1">小组个数</h6>
                                 <span
                                    name="group_count"
                                    class="h3 font-weight-bold mb-0"
                                    >8</span
                                 >
                              </div>
                              <div class="col-auto">
                                 <i class="bi bi-collection"></i>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col col-xl-8">
                     <div class="card" id="line" style="height: 400px"></div>
                  </div>
                  <div class="col col-xl-4">
                     <div class="card" id="salary" style="height: 400px"></div>
                  </div>
                  <div class="col col-xl-12">
                     <div class="card" style="height: 400px">
                        <div class="card-header">
                           <div
                              class="d-flex justify-content-between align-items-center"
                           >
                              <h6 class="mb-0">班级每组薪资</h6>
                              <div id="btns">
                                 <button
                                    type="button"
                                    class="btn btn-xs btn-blue"
                                 >
                                    1
                                 </button>
                                 <button type="button" class="btn btn-xs">
                                    2
                                 </button>
                                 <button type="button" class="btn btn-xs">
                                    3
                                 </button>
                                 <button type="button" class="btn btn-xs">
                                    4
                                 </button>
                                 <button type="button" class="btn btn-xs">
                                    5
                                 </button>
                                 <button type="button" class="btn btn-xs">
                                    6
                                 </button>
                                 <button type="button" class="btn btn-xs">
                                    7
                                 </button>
                                 <button type="button" class="btn btn-xs">
                                    8
                                 </button>
                              </div>
                           </div>
                        </div>
                        <div class="card-body p-0" id="lines"></div>
                     </div>
                  </div>
                  <div class="col col-xl-4">
                     <div class="card" id="gender" style="height: 500px"></div>
                  </div>
                  <div class="col col-xl-8">
                     <div class="card" id="map" style="height: 500px"></div>
                  </div>
               </div>
               <!-- footer -->
               <div class="footer pt-5 pb-4 footer-light" id="footer-main">
                  <div
                     class="row text-center text-sm-left align-items-sm-center"
                  >
                     <div class="col-sm-6">
                        <p class="text-sm mb-0">
                           © 2022
                           <a
                              href="https://itcast.cn"
                              class="h6 text-sm"
                              target="_blank"
                              >前端学科</a
                           >. All rights reserved.
                        </p>
                     </div>
                     <div class="col-sm-6 mb-md-0">
                        <ul
                           class="nav justify-content-center justify-content-md-end"
                        >
                           <li class="nav-item">
                              <a class="nav-link" href="#">Support</a>
                           </li>
                           <li class="nav-item">
                              <a class="nav-link" href="#">Terms</a>
                           </li>
                           <li class="nav-item">
                              <a class="nav-link pr-0" href="#">Privacy</a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script src="./bootstrap/bootstrap.min.js"></script>
      <script src="./lib/axios.js"></script>
      <script src="./lib/echarts.min.js"></script>
      <script src="./js/common.js"></script>
      <script src="./lib/china.js"></script>
      <script src="./js/index.js"></script>
      <script>
         // ------------- 测试axios 自定义请求头 如何携带token -------------
         async function func() {
            console.log("页面发送请求")
            const res = await axios({
               url: "dashboard",
               //  headers: {
               //     // info: 'good good study' // info这个请求头只是测试用,没有功能
               //     Authorization: localStorage.getItem("usertoken"), // 接口文档需要开发者携带的 token
               //  },
            })
            console.log("接受到服务器相应回来的内容")
            console.log("res:", res)
         }
         func()
      </script>
   </body>
</html>
